<template>
  <div v-if="endlessKanvasScene">
    <q-img class=" fit-to-screen-button image-button" src="sprite/fullscreen.png" width='48px'
      @click="onClickFitToScreen">
      <q-tooltip>
        fitToScreen
      </q-tooltip>
    </q-img>
  </div>
</template>

<script lang="ts">
import fitToScreen from 'src/apps/spaces-2d/fitToScreen';
import { defineComponent } from 'vue';
import { usePhaserStore } from '../../stores/phaserStore';
import { mapState } from 'pinia';
export default defineComponent({
  name: 'fitToScreen',
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene']),


  },
  methods: {
    onClickFitToScreen() {
      fitToScreen(this.endlessKanvasScene);
    }
  }
});
</script>
<style  scoped>
.fit-to-screen-button {
  /* border: dotted tomato; */
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-button {
  cursor: pointer;
  pointer-events: initial;
}



.glow-effect {
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.9);

  /* Пример стиля "glow" */
}
</style>
